<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		td{
			text-align: center;
			width: 125px;
		}
		.c2{
			margin-left: 40px;
			margin-bottom: 40px;
		}
	</style>
	

</head>
<body>
	<br/>
	<center>
		<form action="queryStu.do" method="get">
			姓名<input name="sname" value="${student.sname}"/>&nbsp;
			性别
			<select name="gender">
				<option value="-1">请选择</option>
				<option value="男" <c:if test="${student.gender =='男'}">selected="selected"</c:if> >男</option>
				<option value="女" <c:if test="${student.gender =='女'}">selected="selected"</c:if> >女</option>
			</select>&nbsp;&nbsp;&nbsp;
			<input type="submit" value="查询"/>
		</form>
	<br/>
	</center><br/>
	<input type="button" id="batchDel" value="批量删除" style="margin-left: 150px"/>
	<br/>
	<table border="1px" width="80%" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<th><input type="checkbox" id="checkAll" />全选/全不选</th>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>生日</th>
			<th>爱好</th>
			<th>头像</th>
			<th>操作</th>
		</tr>
		<!-- 遍历学生的信息 -->
		<c:forEach items="${page.pageList}" var="stu">
		<tr>
			<td><input type="checkbox" class="ch" value="${stu.sid}"/></td>
			<td>${stu.sid}</td>
			<td>${stu.sname}</td>
			<td>${stu.gender}</td>
			<td>${stu.sbir}</td>
			<td>${stu.hobby}</td>
			<td>
				<img src="http://localhost:8080/img/${stu.photo}" alt="找不到了" width="40px" height="40px">
			</td>
			<td>
				<a href="updateById.do?sid=${stu.sid}">修改</a>
			</td>
		</tr>
		</c:forEach>
	</table>
	<script type="text/javascript">
			var check = document.getElementById("checkAll");
			check.onclick = function () {
				//获取复选框checked的属性值
				var ch = check.checked;
				console.log(ch);
				//获取所有将复选框
				var chek = document.getElementsByClassName("ch");
				//遍历
				for (var i = 0; i < chek.length; i++){
					//将属性值复制给其他复选框
					chek[i].checked = ch;
				}
			}

			//批量删除
			var batch = document.getElementById("batchDel");
			batch.onclick = function () {
				//删除提示
				var flg = confirm("你确定要删除吗？？")
				if (flg) {
					var chek = document.getElementsByClassName("ch");
					var ids = "";
					for (var i = 0; i < chek.length; i++) {
						//获取复选框checked属性值
						var choose = chek[i].checked;
						//如果返回true,则表示被选中
						if (choose) {
							var va = chek[i].value;
							console.log(choose, ":", va);
							ids += "," + va;    //,1,2,3,4
						}
				}
					//对手机的学生编号进行处理
					var id = ids.substring(1);
					console.log(id);
					if(id != ""){
							//将要删除的学生编号提交给后台完成删除
						location.href = "deleteStudentById.do?ids=" + id;
					}else{
						alert("请至少选中一个删除的学生~~~~~~~");
					}
				}

			}
	</script>
	<br/><br/>
	<center>
		<a href="queryStu.do?currentPage=1&sname=${student.sname}&gender=${student.gender}" class="c2">首页</a>
		<a href="queryStu.do?currentPage=${page.prePage}&sname=${student.sname}&gender=${student.gender}" class="c2">上一页</a>
		<a href="queryStu.do?currentPage=${page.nextPage}&sname=${student.sname}&gender=${student.gender}" class="c2">下一页</a>
		<a href="queryStu.do?currentPage=${page.countPage}&sname=${student.sname}&gender=${student.gender}" class="c2">尾页</a>
		<span class="c2">当前页码<input size="4" value="${page.currentPage}"/></span>
		<span class="c2">总记录数<input size="4" value="${page.countNum}"/></span>
	</center>
</body>
</html>